<template>
	<view>
		<ttBar title="意见反馈" leftIcon="icon-back"></ttBar>
		<view class="feedBox">
			<text class="title">问题和意见*</text>
			<textarea placeholder="HI，遇到问题了吗？还是有什么好的建议。请反馈给我们吧，感谢您的支持~" v-model="cnt"></textarea>
		</view>
		<view class="feedBox">
			<text class="title">图片（提供问题截图）</text>
			<view class="uploadImg">

				<view class="imgBox" v-for="(item,index) in selectImgList" :key="index" v-if="isShow &&selectImgList.length>0">
					<text class="iconfont icon-guanbi2fill" @tap.stop="delImg(index)"></text>
					<image :src="item" @tap="replaceImg(index)"></image>
				</view>
				<view class="upBtn" @tap="selectImg" v-if="selectImgList.length<5">
					<text class="iconfont icon-xiangji"></text>
					<text class="btnText">上传图片</text>
				</view>
			</view>
		</view>
		<button class="postBtn" @tap="postData">提 交</button>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import API from "@/common/api.js";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				selectImgList: [],
				isShow:false,
				cnt:''
			};
		},
		methods: {
			// 选择图片
			selectImg() {
				let _this = this
				let _count = 5 - _this.selectImgList.length;
				uni.chooseImage({
					count: _count,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						let _allCount = _this.selectImgList.length + res.tempFilePaths.length;
						if (_allCount > 5) {
							uni.showToast({
								title: '最多只能上传6张照片',
								icon: 'none'
							});
						} else {
							let _overSize = res.tempFiles.every((x) => {
								return x.size <= 3145728
							})
							if (_overSize) {
								if (_this.selectImgList.length > 0) {
									_this.selectImgList = _this.selectImgList.concat(res.tempFilePaths)
								} else {
									_this.selectImgList = res.tempFilePaths;
								}
								_this.isShow=true;
								console.log(_this.selectImgList);
							} else {
								uni.showToast({
									title: '图片不能超过3M',
									icon: 'none'
								});
							}

						}

					}
				});
			},
			// 替换图片
			replaceImg(e) {
				let _this = this;
				let _index = parseInt(e);
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let _overSize = res.tempFiles.every((x) => {
							return x.size <= 3145728
						})
						if (_overSize) {
							_this.selectImgList[_index] = res.tempFilePaths[0];
							_this.isShow = false;
							_this.isShow = true;
						} else {
							uni.showToast({
								title: '图片不能超过3M',
								icon: 'none'
							});
						}
					}
				});
			},
			// 删除图片
			delImg(e) {
				let _index = parseInt(e);
				this.selectImgList.splice(_index, 1)
			},
			postData(){
				let _this=this;
				_this.cnt=this.cnt.tailCut();
				if(!_this.cnt){
					uni.showToast({
						title: '请输入问题和意见',
						icon: 'none'
					});
				}else{
					if(_this.selectImgList.length>0){
						let upArr=[];
						_this.selectImgList.forEach(function(x){
							upArr.push({uri:x,name:'file'})
						})
					
						API.uploadImg(upArr).then(res=>{
							let _postImg=[];
							res.forEach(function(item){
								_postImg.push({
									type:2,
									url:item
								})
							})
							console.log(_postImg);
							uni.hideLoading()
							let _data={
								userId:_this.userInfo.userId,
								type:2,
								content:_this.cnt,
								resList:_postImg
							}
							_this.$store.dispatch("apiFeedBack",_data)
							.then(resRlt=>{
								_this.$refs.hkModal.init({
									title:'反馈成功',
									cntText:'感谢您的关注与支持，我们会认真处理你的反馈。',
									cancle:'',
									confirm:'确认',
									maskClose:true,
									confirmFcn:()=>{
										uni.navigateBack({
											delta:1
										})
									},
								})
								_this.$refs.hkModal.show()
								
							}).catch(err=>{
								uni.showToast({
									title: '反馈失败'+err.data.msg,
									icon: 'none'
								});
							})
						}).catch(()=>{
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						})
					}else{
						let _data={
							userId:_this.userInfo.userId,
							type:2,
							content:_this.cnt,
						}
						_this.$store.dispatch("apiFeedBack",_data)
						.then(res=>{
							_this.$refs.hkModal.init({
								title:'反馈成功',
								cntText:'感谢您的关注与支持，我们会认真处理你的反馈。',
								cancle:'',
								confirm:'确认',
								maskClose:true,
								confirmFcn:()=>{
									uni.navigateBack({
										delta:1
									})
								},
							})
							_this.$refs.hkModal.show()
						}).catch(err=>{
							uni.showToast({
								title: '反馈失败'+err.data.msg,
								icon: 'none'
							});
						})
						
					}
				}
				
			}
		}
	}
</script>

<style lang="less">
	.postBtn{
		color: #FFFFFF;
		margin: 0 106upx;
		margin-top: 120upx;
		height: 86upx;
		background-color: #ffb423;
		border-radius: 43upx;
		line-height: 86upx;
		font-size: 32upx;
	}
	.feedBox {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(201, 202, 208, 0.15);
		margin: 20upx 18upx;
		border-radius: 10upx;
		padding-bottom: 40upx;
		.title{
			font-size: 32upx;
			color: #545454;
			padding: 20upx 28upx;
		}
		textarea{
			background-color: #f9f9f9;
			font-size: 28upx;
			padding: 20upx 28upx;
			width: 100%;
			box-sizing: border-box;
		}
	}

	page {
		background-color: #f6f6f6;
	}

	.uploadImg {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 28upx;
		.imgBox {
			width: 180upx;
			height: 180upx;
			position: relative;
			margin-right: 20upx;
			margin-bottom: 20upx;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}

			.iconfont {
				position: absolute;
				top: -16upx;
				right: -16upx;
				font-size: 40upx;
				color: #ff3d3d;
				z-index: 3;
			}
		}

		.upBtn {
			width: 180upx;
			height: 180upx;
			box-sizing: border-box;
			border-radius: 10upx;
			border: 1rpx dashed #cccccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #b2b2b2;
			margin-bottom: 20upx;

			.iconfont {
				font-size: 60upx;
			}

			.btnText {
				font-size: 28upx;
			}
		}
	}
</style>
